<template>
	<view class="ynq-Location">
		<view class="emg-1">
			<uni-search-bar bgColor="#EEEEEE" confirm-type="search"
				 @click="gochoose()" cancelButton="none" style="width: 100%;"/>
			<!-- <view>搜索</view> -->
		</view>
		<!-- 字母区域 -->
		<view class="ynq-Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)">{{l}}</view>
		</view>
		<view class="ynq-AutoLocation flex" style="display: flex;background-color: #fff;">
			<view class="ynq-AutoAddress" style="white-space: nowrap;width: 85%;">
				<text class="ynq ynq-dizhi"></text>
				<text style="font-weight: 800;">定位城市：</text>
				<text style="font-weight: 800;" @click="chooseLoc(CityName)">{{CityName}}</text>
			</view>
			<view class="ynq-ReLocation" style="white-space: nowrap;margin-right: 24rpx;color: #5398f6;">
				<text class="ynq ynq-ditudingwei"></text>
				<text @click="getloc()">重新定位</text>
			</view>
		</view>

		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<!-- 热门城市 -->
			<view class="ynq-HotCity" id="ScrollTop" style="background-color: #fff;margin-top: 1%;">
				<view class="ynq-HotCityTitle">
					<text class="ynq ynq-fire"></text>
					<text>热门城市</text>
				</view>

				<view class="ynq-HotCityList flex">
					<text class="radius-3" @tap="getStorage(item)" v-for="(item,index) in HotCity"
						:key="index" style="margin-left: 1%;">{{item}}</text>
				</view>
			</view>
			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<block v-for="(item,index) in CityList" :key="index">
					<view class="ynq-CityLetter" :id="item.initial">{{item.initial}}</view>
					<view class="ynq-CityLine">
						<text @tap="getStorage(item_city.name)" v-for="(item_city,name_index) in item.list"
							:key="name_index" style="font-size: 32rpx;">{{item_city.name}}</text>
					</view>
				</block>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	var cityData = require('@/components/json/city.json')
	export default {
		data() {
			return {
				CityName: '',
				HotCity: ['全国','北京', '深圳', '上海', '成都', '广州'],
				LatterName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				CityList: cityData.city, //引用json数据
				LetterId: '',
				optionId:'',
				latitude:'',
				longitude:'',
				
			}
		},
		onLoad(option){
			this.optionId=option.ids
		},
		methods: {
			chooseLoc(a){
				this.CityName = a 
				let data={add:a,name:a}
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
					method: 'GET',
					type: 'gcj02',
					data: {
						key: '44237e1964e1480718c9efbe5d214bed', //高德地图key
						address: a // 详细地址
					},
					success: res => {
						// console.log(res.data.geocodes[0].location)
						const latitude = res.data.geocodes[0].location.split(",")[0];
						const longitude = res.data.geocodes[0].location.split(",")[1];
						this.latitude = latitude
						this.longitude = longitude
						console.log(this.latitude, this.longitude)
						let data = {
							la: this.latitude,
							lo: this.longitude,
							name:a
						}
						uni.setStorageSync('cityInfo',data)
						uni.redirectTo(
						{
							url:'/pages/my/organization/location'
						});
					}
				})	
			},
			gochoose(){
				uni.navigateTo({
					url:"/pages/my/organization/search"
				})
			},
			getloc() {
				uni.getLocation({
					type: "gcj02",
					geocode: true,
					isHighAccuracy: true,
					success: (res) => {
						this.CityName = res.address.city.replace("市", "")
						
						uni.setStorage({
							key: 'City_Name2',
							data: this.CityName,
							success: (res) => {
								// alert(1)
								// console.log(success)
							}
						})
					}
				})
			},
			//获取定位点
			getLetter(name) {
				this.LetterId = name
				uni.pageScrollTo({
					selector: '#' + name,
					duration: 300
				})
			},
			//存储城市缓存
			getStorage(Name) {
				this.CityName = Name 
				let data={add:Name,name:Name}
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
					method: 'GET',
					type: 'gcj02',
					data: {
						key: '44237e1964e1480718c9efbe5d214bed', //高德地图key
						address: Name // 详细地址
					},
					success: res => {
						// console.log(res.data.geocodes[0].location)
						const latitude = res.data.geocodes[0].location.split(",")[0];
						const longitude = res.data.geocodes[0].location.split(",")[1];
						this.latitude = latitude
						this.longitude = longitude
						console.log(this.latitude, this.longitude)
						let data = {
							la: this.latitude,
							lo: this.longitude,
							name:Name
						}
						uni.setStorageSync('cityInfo',data)
						uni.redirectTo(
						{
							url:'/pages/my/organization/location'
						});
					}
				})	
				//跳转返回
				// let cName = this.CityName
				// var pages = getCurrentPages();
				// var prevPage = pages[pages.length - 2]; //上一个页面
				// prevPage.$vm.otherFun(cName);//重点$vm
				// uni.navigateBack();
			}
		},
		onShow() {
			this.getloc()
		},
	}
</script>

<style lang="scss" scoped>
	.ynq-Location {
		height: 100vh;
	}

	.ynq-AutoLocation {
		width: calc(100% - 40rpx);
		background: rgba(250, 250, 250, .5);
		padding: 20rpx 20rpx;

		text.ynq {
			font-size: 32rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.ynq-HotCity {
		padding: 20rpx;
	}

	.ynq-HotCityTitle {
		padding: 0rpx 0rpx;

		text.ynq {
			margin-right: 10rpx;
			color: #ff0000;
			font-size: 32rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.ynq-HotCityList {
		padding: 20rpx 20rpx 20rpx 0;
		flex-wrap: wrap !important;

		text {
			width: 32%;
			display: inline-block;
			text-align: center;
			background: rgba(200, 200, 200, .2);
			margin-bottom: 10rpx;
			font-size: 26rpx;
			padding: 20rpx 0;
		}
	}

	.ynq-Letter {
		position: fixed;
		right: 5rpx;
		top: 180rpx;
		width: 30rpx;
		z-index: 100;

		view {
			display: block;
			width: 30rpx;
			text-align: center;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 22rpx;
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}

	.ynq-CityList {
		padding: 0px 40rpx 0 20rpx;

		.ynq-CityLetter {
			line-height: 30rpx;
			height: 40rpx;
			font-size: 24rpx;
			border-bottom: 1px solid #f7f7f7;
			padding-left: 10rpx;
			color: #909090;
		}

		.ynq-CityLine {
			margin: 20rpx 0px;

			text {
				display: block;
				line-height: 60rpx;
				padding: 0px 10rpx;
				font-size: 30rpx;
				color: #767676;

				&:nth-child(even) {
					background-color: rgba(200, 200, 200, .12);
				}
			}
		}
	}

	.ynq-ScrollView {
		height: calc(100vh - 160rpx);
	}

	.Click-Latter {
		font-size: 30rpx !important;
	}
	.emg-1 {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		display: flex;
		// justify-content: flex-start;
		// align-items: flex-start;
		// background-color: red;
		// margin-left: 10%;
	}
	
	.uni-searchbar {
		width: 100%;
		// background-color: blue;
		height: 60rpx;
		// justify-content: flex-start;
		// align-items: flex-start;
		/* background-color: red; */
	}
	.uni-searchbar__box{
		justify-content: flex-start;
		align-items: flex-start;
	}
	.emg-1 view {
		line-height: 100rpx;
		/* padding-top: 35rpx; */
	}
	.emg-2 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		color: #52baff;
	}
	
	.emg-3 {
		margin-top: 50upx;
	}
	
	.emg-5 {
		margin-left: 40upx;
	}
	
	.slot-text {
		display: inline-block;
	}
	
</style>